[General] [Fixed] - Fix stale leadingItem/trailingItem in VirtualizedSectionList ItemWithSeparator#56363
Conversation
…reused ItemWithSeparator stores leadingSeparatorProps and separatorProps in local state, initialised once from the incoming props. When the virtualised list recycles the same cell component for a different data row (e.g. after scrolling), the component re-renders with new item/section props but the state is never updated, so the separator keeps the stale values from the previous row. This can expose undefined leadingItem or trailingItem values at section boundaries, as reported in react#55708. The fix adds a useEffect that resets both separator prop objects whenever any of the relevant incoming props change, keeping the state in sync with the current row without disturbing any external highlight/updateProps calls that happen in the separate useEffect below.
|
Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
Nedunchezhiyan-M
force-pushed
the
fix/virtualizedsectionlist-itemwithseparator-stale-state
branch
from
39f8d8c to
c745ae3
Compare
meta-cla
Bot
added
the
CLA Signed
facebook-github-tools
Bot
added
the
Shared with Meta
1 participant
Summary:
ItemWithSeparatorinVirtualizedSectionListstores separator props (leadingSeparatorProps,separatorProps) in local React state, initialised once from the incomingprops.leadingItem,props.item, andprops.trailingItem. However, the virtualised list can recycle the same component instance for a different data row when the rendered region changes (e.g. after scrolling). When this happens the component re-renders with new item/section props, but the state is never updated, so theItemSeparatorComponentreceives stale values from the previous row — includingundefinedat section boundaries.This was reproducible via the failing test added in #55707.
Fix: Add a
useEffectthat resets both separator prop objects whenever the relevant item or section props change, keeping the state in sync without affecting the separateuseEffectthat registers the highlight/updateProps callbacks.Fixes #55708
Changelog:
[General] [Fixed] - Fix VirtualizedSectionList passing stale leadingItem/trailingItem to ItemSeparatorComponent after cell reuse
Test Plan:
The existing failing test in #55707 (
VirtualizedSectionList › syncs ItemWithSeparator separator props when list re-renders with new leadingItem/trailingItem) should now pass with this fix applied.The effect runs whenever
props.item,props.leadingItem,props.leadingSection,props.section,props.trailingItem, orprops.trailingSectionchange — exactly the props that seed the separator state on mount.